<template>
    <div>
        <div class="size-p">
            设置模板尺寸 <input type="number" class="input-number" v-model="width" :min="0" :max="600" /> X 
            <input type="number" class="input-number" v-model="height" :min="0" :max="999"/>
            <el-button @click="toDefaultSize" type="text">恢复默认尺寸</el-button>

        </div>
        <div class="operate">
            <div class="title">学生信息</div>

            <el-button @click="comfirmHead" class="btn" type="primary">添加头像</el-button>

            <el-button @click="comfirmName" class="btn" type="primary">添加姓名</el-button>

            <el-button @click="comfirmClass" class="btn" type="primary">添加年级班级</el-button>
            <el-button @click="addNum" class="btn" type="primary">添加座号</el-button>
            <el-button @click="addCode" class="btn" type="primary">添加学生二维码</el-button>
        </div>
        <div class="operate">
            <div class="title">学校信息</div>
            <el-button @click="addSchoolName" class="btn" type="primary">添加学校名称</el-button>
            <el-button @click="addImgVisible = true" class="btn" type="primary">添加校园LOGO</el-button>
        </div>
        <div class="operate">
            <div class="title">其它信息</div>
            <el-button @click="addBackgroundVisible = true" class="btn" type="primary">添加背景图片</el-button>
            <el-button @click="addRectVisible = true" type="primary" class="btn">添加矩形</el-button>
            <el-button @click="addImgVisible = true" type="primary" class="btn">添加图片</el-button>
            <el-button @click="addTextVisible = true" type="primary" class="btn">添加文字</el-button>
        </div>
        

        <addRect :visible="addRectVisible" @close="addRectVisible = false" ></addRect>
        <addImg :visible="addImgVisible" @close="addImgVisible = false" ></addImg>
        <addText :visible="addTextVisible" @close="addTextVisible = false" ></addText>

        <addBackground :visible="addBackgroundVisible" @close="addBackgroundVisible = false"></addBackground>

    </div>
</template>
<script>
import addRect from './addRect.vue'
import addImg from './addImg.vue'
import addText from './addText.vue'
import addBackground from './addBackground.vue'
export default {
    components: {
        addRect, addImg, addText, addBackground
    },
    props: {
    
    },
    watch: {
        width: function(){
            if(this.width < 0){
                this.width = 0
            }
            if(this.width > 600){
                this.width = 600
            }
            fabricCanvas.canvas.setWidth(this.width)
        },
        height: function(){
             if(this.height < 0){
                this.height = 0
            }
            if(this.height > 999){
                this.height = 999
            }
            fabricCanvas.canvas.setHeight(this.height)
        }
    },
    data(){
        return {
            width: 0,
            height: 0,

            defaultWidth: 186,
            defaultHeight: 312,

            addRectVisible: false,
            addImgVisible: false,
            addTextVisible: false,
            addBackgroundVisible: false
        }
    },
    methods: {
        toDefaultSize(){
            this.width = this.defaultWidth
            this.height = this.defaultHeight
        },
    
        comfirmHead(){
            window.fabricCanvas.addHead()
        },
        comfirmName(){
            window.fabricCanvas.addName()
        },
        comfirmClass(){
            window.fabricCanvas.addClass()
        },
        addSchoolName(){
             window.fabricCanvas.addSchoolName()
           
        },
        addNum(){
            fabricCanvas.addNum()
        },
        addCode(){
            fabricCanvas.addCode()
        }
    },
    mounted(){

        setTimeout(() => {
            this.width = fabricCanvas.canvas.getWidth()
            this.height = fabricCanvas.canvas.getHeight()
        }, 1000)
       

       
        
    }
}
</script>
<style scoped>
.operate{
    width: 200px;
    display: inline-block; vertical-align: top;
    text-align: center;
    padding: 0 0 20px 0;
}
.title{
    font-size: 20px; 
}
.btn{
    margin: 10px 0; width: 120px;
}
.input-number{
     border: 1px solid #C0C4CC; padding: 5px;
    width: 100px;
}
.size-p{
    padding: 0 0 20px 0;
}
</style>